<template>
  <page-meta :page-style="pageStyle" />
  <view class="search-view">
    <view class="buttonTop"></view>
    <view class="search-input" @click="searchPage">
      <image src="../../static/tab/sousuo.svg" mode="widthFix" />
      <input
        type="text"
        placeholder="搜索目的地/景点/攻略"
        placeholder-class="input-color"
        disabled
      />
    </view>
  </view>
  <!-- 顶部 -->
  <view class="Rec-destination" :class="{ 'add-view-hei': isIncreased }">
    <view class="reco-Image-back" :class="{ 'reco-Image-over': isIncreased }">
      <image
        class="reco-Image-url"
        :class="[isIncreased ? 'add-Image-hei' : 'breathe']"
        :src="wxGainDailyRecomObj.imageUrl"
        mode="aspectFill"
        @click="increaseHeight"
      />
    </view>
    <!-- 未展开的 -->
    <text class="yin-yin" v-if="!isIncreased"></text>
    <text class="tansuo" v-if="!isIncreased" @click.stop="increaseHeight">去探索</text>
    <text class="all-destination" v-if="!isIncreased" @click="destInation">全部目的地</text>
    <view
      class="search-input-top"
      :style="{ backgroundColor: wxGainDailyRecomObj.color }"
      v-if="!isIncreased"
      @click="searchPage"
    >
      <image src="../../static/icon/found/sousuo-bai.png" mode="widthFix" />
      <text>搜索目的地/景点/攻略</text>
    </view>
    <view
      v-show="!isIncreased"
      class="top-naviga-tion global-display global-j-around global-a-items"
    >
      <view
        class="global-display global-a-items global-f-direction"
        v-for="(item, index) in topNavigaTion"
        :key="index"
        @click="topnavIgtion(index, item.text)"
      >
        <image :src="item.icon" mode="widthFix" />
        <text>{{ item.text }}</text>
      </view>
    </view>
    <!-- 已展开的 -->
    <view class="reco-Address" v-if="isIncreased">
      <text class="reco-Address-text">{{ wxGainDailyRecomObj.title }}</text>
      <view class="global-display global-a-items global-j-content">
        <view
          class="global-display global-a-items"
          @click="chooseCity(wxGainDailyRecomObj.address)"
        >
          <image src="../../static/icon/index/address.png" mode="widthFix"></image>
          <text>{{ wxGainDailyRecomObj.address }}</text>
        </view>
        <view class="global-display global-a-items" @click="destInation">
          <text>前往目的地</text>
          <image src="../../static/icon/personal-Data/jiantou-you.png" mode="widthFix"></image>
        </view>
      </view>
    </view>
    <view class="reco-Exit" v-show="isIncreased">
      <text @click.stop="exItfun">退出</text>
    </view>
  </view>
  <view style="height: 50rpx"></view>
  <!-- 旅游分类 -->
  <view class="grid-view">
    <view
      class="global-display global-f-direction global-a-items"
      v-for="(item, index) in gridArr"
      :key="index"
      @click="topnavIgtion(-1, item.text)"
    >
      <image :src="item.icon" mode="widthFix"></image>
      <text>{{ item.text }}</text>
    </view>
  </view>
  <!-- tab导航 -->
  <view class="container">
    <scroll-view
      class="tabs"
      scroll-x
      :scroll-left="scrollLeft"
      enable-passive
      scroll-with-animation
    >
      <view
        v-for="(item, index) in tabNav"
        :key="index"
        class="tab"
        @tap="handleTabTap(index)"
      >
        <view class="tab-text" :class="{ active: activeIndex === index }">{{ item.name }}</view>
        <view class="tab-underline" :class="{ activeBor: activeIndex === index }"></view>
      </view>
    </scroll-view>
  </view>
  <!-- 推荐 -->
  <Recomment v-show="keyWords == '001'" :newestTravel="newestTravel" />
  <!-- 瀑布流 -->
  <cardFlow :userTravels="newUserTaavels" :noMore="noMore" />
  <view style="height: 200rpx"></view>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, nextTick, watch } from 'vue'
import { MenuButton } from '@/api/MenuButton'
import { onReachBottom, onPageScroll, onLoad, onPullDownRefresh } from '@dcloudio/uni-app'
import Recomment from './components/recomment.vue'
import cardFlow from '@/components/card-flow.vue'
import { getDailyRecomAPI, getFourTravelAPI, getHomeTravelsAPI, getRecommTravelAPI, getRecommTravelTabAPI } from '@/api/home'
import type { DailyRecomItemType, FourTravelTypeResponse, HomeTravelsTypeResponse, RecommTravelTabTypeResponse, RecommTravelTypeResponse, DailyRecomTypeResponse } from '@/types/home'


// 点击顶部图片加高度
let isIncreased = ref(false)
const increaseHeight = () => {
  isIncreased.value = true
  wx.hideTabBar({ animation: true })
}
const exItfun = () => {
  isIncreased.value = false
  wx.showTabBar({ animation: true })
}

// 用于动态控制页面滚动
const pageStyle = ref('overflow: inherit')

// 监听如果展示地址，禁用页面滚动
watch(isIncreased, newValue => {
  pageStyle.value = newValue ? 'overflow: hidden' : 'overflow: inherit'
})
// 存储顶部推荐切换地址和总条数
const wxGainDailyRecomObj = ref<DailyRecomItemType>({
  _id: '',
  imageUrl: '',
  title: '',
  address: '',
  color: '',
})
const wxGainDailyRecomCount = ref<number>(0)

// 顶部导航
const topNavigaTion = ref([
  {
    icon: '/static/icon/index/jieban.png',
    text: '结伴',
  },
  {
    icon: '/static/icon/index/lvpai.png',
    text: '旅拍/跟拍',
  },
  {
    icon: '/static/icon/index/zhibo.png',
    text: '直播',
  },
  {
    icon: '/static/icon/index/yiriyou.png',
    text: '一日游',
  },
  {
    icon: '/static/icon/index/minsu.png',
    text: '民宿/客栈',
  },
])
// 宫格:游记类型
const gridArr = ref<RecommTravelTypeResponse>([])
// 推荐四个最新的游记
const newestTravel = ref<FourTravelTypeResponse>([])
// tab游记分类切换
const tabNav = ref<RecommTravelTabTypeResponse>([])
// 瀑布流：用户游记
const userTravels = ref<{query:number,data:HomeTravelsTypeResponse,page:number}[]>([])
const newUserTaavels = ref<HomeTravelsTypeResponse>([])
const travelsIndex = ref(0)
const activeIndex = ref(0)
const scrollLeft = ref(0)
const tabWidths = ref<{width:number,left:number}[]>([])
// 点击tab切换分类游记
const keyWords = ref('001')
// 是否没有更多
const noMore = ref(false)

// 点击tab切换滑动指定tab上
const handleTabTap = async (
  index: number,
) => {
  scrollLeft.value =
    tabWidths.value[index].left -
    uni.getSystemInfoSync().windowWidth / 2 +
    tabWidths.value[index].width / 2
  activeIndex.value = index
  const query = tabNav.value[index].key
  keyWords.value = query
  // 如果之前选中的就不再请求数据
  if (!userTravels.value.find(item => item.query === index)) {
    const user_travels = await getHomeTravelsAPI(query, 1)
    userTravels.value.push({ query: index, data: user_travels.data, page: 1 })
    const newVal = userTravels.value.filter(item => item.query === index)
    newUserTaavels.value = newVal[0].data
  } else {
    const newVal = userTravels.value.filter(item => item.query === index)
    newUserTaavels.value = newVal[0].data
  }
  console.log(userTravels.value)
  travelsIndex.value = userTravels.value.findIndex(item => item.query === index)
}

// 请求全部数据
onLoad(async () => {
  // 每日推荐
  const gainDailyRecom = await getDailyRecomAPI(1)
  wxGainDailyRecomObj.value = gainDailyRecom.data.data[0]
  wxGainDailyRecomCount.value = gainDailyRecom.data.count
  // 四个游记推荐
  const gainRecomTravel = await getFourTravelAPI()
  console.log(gainRecomTravel)
  newestTravel.value = gainRecomTravel.data
  // 旅游分类10个
  const four_travel = await getRecommTravelAPI()
  const tabArr = await getRecommTravelTabAPI()
  const user_travels = await getHomeTravelsAPI('001', 1)
  console.log(user_travels)
  gridArr.value = four_travel.data
  tabNav.value = tabArr.data
  userTravels.value.push({ query: 0, data: user_travels.data, page: 1 })
  newUserTaavels.value = userTravels.value[0].data
  await nextTick() //获取tab导航数据
  let query = uni.createSelectorQuery()
  query
    .selectAll('.tab')
    .boundingClientRect((rects: any) => {
      const nodes = Array.isArray(rects) ? rects : rects ? [rects] : []
      tabWidths.value = nodes.map((item: any) => {
        return { width: item.width, left: item.left }
      })
    })
    .exec()
})

// 下拉刷新:顶部推荐
const recoPage = ref(1)
onPullDownRefresh(async () => {
  recoPage.value++
  if (recoPage.value >= wxGainDailyRecomCount.value + 1) {
    recoPage.value = 1
  }
  const gainDailyRecom = await getDailyRecomAPI(recoPage.value)
  wxGainDailyRecomObj.value = gainDailyRecom.data.data[0]
  uni.stopPullDownRefresh()
})
// 上拉加载
onReachBottom(async () => {
  if (noMore.value) return
  userTravels.value[travelsIndex.value].page++
  const user_travels = await getHomeTravelsAPI(keyWords.value, userTravels.value[travelsIndex.value].page)
  if (user_travels.data.length === 0) {
    noMore.value = true
    return
  } else {
    noMore.value = false
  } 
  userTravels.value[travelsIndex.value].data = [
    ...userTravels.value[travelsIndex.value].data,
    ...user_travels.data,
  ]
  newUserTaavels.value = userTravels.value[travelsIndex.value].data
})

// 搜索框透明度和颜色
const styleOpacity = ref(0)
// 滚动监听
onPageScroll(event => {
  if (event.scrollTop <= 200) {
    styleOpacity.value = 0
  } else {
    styleOpacity.value = event.scrollTop / 140
  }
})

// 跳转目的地
function destInation() {
  exItfun()
  wx.switchTab({ url: '/pages/found/found' })
}
// 跳转搜索
function searchPage() {  
  wx.navigateTo({ url: '/pages/search-travel/search' })
}
// 选择城市到目的地
function chooseCity(city:string) {
  exItfun()
  // store.$patch({ address: city })
  wx.switchTab({ url: '/pages/found/found' })
}
// 搜索框下面的分类类型
function topnavIgtion(index:number, value:string) {
  if (index === 0) {
    //结伴
    wx.navigateTo({ url: '/pages/companion/companion' })
  } else if (index === 2) {
    //直播
  } else {
    wx.navigateTo({ url: `/pages/types-travel/index?type=001&query=${value}&address=null` })
  }
}
</script>
<style>
page {
  background-color: #f7f8fb;
}
.search-view {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  height: v-bind('MenuButton().seViewHeight');
  background-color: #ffffff;
  opacity: v-bind('styleOpacity');
}
.occupy-space {
  height: v-bind('MenuButton().seViewHeight');
}
.buttonTop {
  height: v-bind('MenuButton().top');
}
.search-input {
  background: #f4f4f4;
  border-radius: 50rpx;
  margin-left: 20rpx;
  display: flex;
  flex-direction: row;
  flex: 1;
  position: relative;
  height: v-bind('MenuButton().height');
  width: v-bind('MenuButton().left');
}
.search-input input {
  width: 100%;
  font-size: 30rpx;
  color: #b2b2b2;
  padding-left: 80rpx;
  height: v-bind('MenuButton().height');
}
.search-input image {
  width: 35rpx;
  height: 35rpx;
  position: absolute;
  left: 30rpx;
  align-self: center;
}
.input-color {
  color: #666666;
}
/* 推荐地点 */
.Rec-destination {
  position: relative;
  height: 800rpx;
}
/* 背景图原始高度 */
.reco-Image-back {
  width: 100%;
  height: 800rpx;
  overflow: hidden;
}
/* 全屏覆盖的高度 */
.reco-Image-over {
  height: 100%;
  transition: height 0.5s ease;
  overflow: inherit !important;
}
.reco-Image-url {
  width: 100%;
  height: 800rpx;
}
/* 全屏覆盖的图片高度 */
.add-Image-hei {
  height: 100%;
  transition: height 0.5s ease;
}
/* 全屏覆盖的图片父元素view高度 */
.add-view-hei {
  height: 100vh;
  transition: height 0.5s ease;
}
.breathe {
  animation-name: breathe;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

@keyframes breathe {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
.yin-yin {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  padding: 50rpx 0;
  background: linear-gradient(
    to bottom,
    rgba(247, 248, 251, 0),
    rgba(247, 248, 251, 0.3),
    rgba(247, 248, 251, 0.7),
    rgba(247, 248, 251, 1)
  );
}
.tansuo {
  color: #333;
  background-color: #ffffff;
  border-radius: 40rpx;
  padding: 11rpx 20rpx;
  position: absolute;
  right: 30rpx;
  top: 300rpx;
}
.all-destination {
  position: absolute;
  left: 20rpx;
  top: 50%;
  border: 2rpx solid #ffffff;
  border-radius: 40rpx;
  color: #ffffff;
  font-size: 30rpx;
  font-weight: bold;
  padding: 5rpx 25rpx;
}
.search-input-top image {
  width: 30rpx;
  display: block;
  padding-right: 15rpx;
}
.search-input-top {
  position: absolute;
  bottom: 190rpx;
  left: 20rpx;
  right: 20rpx;
  display: flex;
  align-items: center;
  border-radius: 40rpx;
  backdrop-filter: blur(5rpx);
  padding: 0 30rpx;
  height: 80rpx;
  line-height: 80rpx;
  color: #ffffff;
}
.top-naviga-tion {
  background-color: #ffffff;
  border-radius: 20rpx;
  position: absolute;
  left: 20rpx;
  right: 20rpx;
  bottom: -50rpx;
  padding: 45rpx 0;
  z-index: 99;
  color: #666666;
}
.top-naviga-tion image {
  width: 50rpx;
  display: block;
  padding-bottom: 10rpx;
}
.reco-Address {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  color: #ffffff;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
  padding: 100rpx 20rpx;
  transform: translateY(100%);
  transition: transform 800ms ease-in-out;
  animation: slide-up-animation 800ms forwards;
}
@keyframes slide-up-animation {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
.reco-Address image {
  width: 30rpx;
}
.reco-Address-text {
  font-size: 34rpx;
  font-weight: bold;
  padding-bottom: 20rpx;
}
.reco-Exit {
  left: 20rpx;
  position: absolute;
  top: v-bind('MenuButton().top');
  height: v-bind('MenuButton().height');
  line-height: v-bind('MenuButton().height');
  z-index: 9999;
}
.reco-Exit text {
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 40rpx;
  width: 140rpx;
  text-align: center;
}
/*  */
.grid-view image {
  width: 50rpx;
  height: 50rpx;
  display: block;
  margin-bottom: 10rpx;
}
.grid-view {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 50rpx;
  padding: 30rpx 10rpx;
  color: #666666;
}
/* tab滑动导航栏 */
.container {
  postion: -webkit-sticky;
  position: sticky;
  top: v-bind('MenuButton().seViewHeight');
  z-index: 99;
  background-color: #f7f8fb;
}
.tabs {
  white-space: nowrap;
  width: 100%;
}
.tab {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 30rpx;
  font-size: 30rpx;
  font-weight: bold;
  color: #999;
}
.active {
  color: #000;
}
.tab-underline {
  width: 50rpx;
  height: 8rpx;
  margin-top: 10rpx;
  border-radius: 4rpx;
}
.activeBor {
  background-color: #f8e254;
}
.tabs .tab:nth-child(2) .tab-text {
  color: #91c36f !important;
  font-family: 'Lobster', cursive;
}
</style>
